<!--
 @description 四列导航轮播
 @fileName SwiperNavContent.vue
 @author zengqiongying
 @created 2023/09/06 16:56:08
-->
<template>
  <van-swipe class="my-swipe-box" indicator-color="white" :loop="false" :autoplay="0" :show-indicators="false">
    <van-swipe-item v-for="(item,k) in groupData" :key="k">
      <div class="floor-list">
        <ContentItem
          v-for="(g,i) in item"
          :key="i"
          :src="g.picUrl"
          :name="g.tabName"
          is-swiper
          @click="clickPictureHandle(g)"
        />
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import ContentItem from './NavContentItem'
export default {
  name: 'SwiperNavContent',
  components: { ContentItem },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },

  computed: {
    groupData() {
      const length = this.list.length
      if (length === 0) return []

      const groupArray = (arr, size) => arr.reduce((acc, val, i) => {
        i % size ? acc[acc.length - 1].push(val) : acc.push([val])
        return acc
      }, [])
      const tmp = [...this.list, ...this.list]

      return groupArray([...tmp, ...this.list], 4)
    }
  },
  methods: {
    clickPictureHandle(g) {
      g.routerTitle = g.name
      this.$gotoPage(g, this.$router)
    }
  }
}

</script>
<style lang='less' scoped>
  .my-swipe-box{
    width: 100%;
    height: 112px;
  }
  .floor-list{
    display: flex;
    flex-wrap: nowrap;
    padding-left:16px;
  }
</style>
